<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题 -->
      <div class="addNewTest">
        <el-button type="success" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </div>
      <div class="clear"></div>
      <!-- 筛选条件部分 -->
      <div class="getFilter">
        <el-form ref="testFormRef" :model="testForm" label-width="70px" label-position="right">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" prop="subjectID">
                <el-select v-model="testForm.subjectID" placeholder="请选择" @change="getCurrentId">
                  <el-option
                    v-for="items in subjectlist"
                    :key="items.id"
                    :label="items.label"
                    :value="items.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="testForm.catalogID" placeholder="请选择">
                  <el-option
                    v-for="items in secDirectoryList"
                    :key="items.id"
                    :label="items.directoryName"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="testForm.tags" placeholder="请选择">
                  <el-option
                    v-for="items in tagsList"
                    :key="items.id"
                    :label="items.tagName"
                    :value="items.tagName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyWord">
                <el-input v-model="testForm.keyWord"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第一行结束 -->
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="testForm.questionType" placeholder="请选择">
                  <el-option
                    v-for="items in dt"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="testForm.difficulty" placeholder="请选择">
                  <el-option
                    v-for="items in dif"
                    :key="items.value"
                    :label="items.label"
                    :value="items.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="testForm.direction" placeholder="请选择">
                  <el-option
                    v-for="(items, index) in dr"
                    :key="index"
                    :label="items"
                    :value="items"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creator">
                <el-select v-model="testForm.creator" placeholder="请选择">
                  <el-option
                    v-for="items in creatorList"
                    :key="items.id"
                    :label="items.username"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行结束 -->

          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="testForm.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="enterpriseID">
                <el-input v-model="testForm.enterpriseID"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" class="elFormCity">
                <el-form-item prop="province" :class="['anthorFormItem']">
                  <el-select
                    v-model="testForm.province"
                    placeholder="请选择"
                    @change="getValue"
                    class="selectCity"
                  >
                    <el-option
                      v-for="(item, index) in provinceList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :class="['anthorFormItem']" prop="city">
                  <el-select
                    v-model="testForm.city"
                    style="margin-left: 5px;"
                    placeholder="请选择"
                    class="selectCity"
                  >
                    <el-option
                      v-for="(item, index) in citysList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="clearBth">
                <el-button size="small" @click="clearAll">清除</el-button>
                <el-button type="primary" size="small" @click="acordingSearch">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行结束 -->
        </el-form>
      </div>
      <!-- /筛选条件部分 -->
      <!-- 消息提示 -->
      <el-alert :title="`数据一共有${total}条`" type="info" :closable="false" show-icon></el-alert>
      <!-- /消息提示 -->

      <!-- 表格部分 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="number" label="试题编号"></el-table-column>
        <el-table-column prop="subject" label="学科"></el-table-column>
        <el-table-column prop="catalog" label="目录"></el-table-column>
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template slot-scope="scope">{{new Date(scope.row.addDate)|dataFormate}}</template>
        </el-table-column>
        <el-table-column label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人"></el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" circle plain @click="testView(scope.row)"></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              @click="
                $router.push({
                  name: 'questions-new',
                  query: { id: scope.row.id }
                })
              "
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-check"
              circle
              plain
              @click="testCheck(scope.row.id)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-delete"
              circle
              plain
              @click="testDelete(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- /表格部分 -->
      <!-- 分页部分 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="testForm.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="testForm.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      ></el-pagination>
      <!-- /分页部分 -->
      <!-- 预览的对话框 -->
      <el-dialog title="题目预览" :visible.sync="testViewDialogVisible" width="60%">
        <div :class="['dialogContent']">
          <!--  -->
          <el-row :class="['eleow']">
            <el-col :span="6">【题型】: {{ questionType }}</el-col>
            <el-col :span="6">【编号】:{{ row.id }}</el-col>
            <el-col :span="6">【难度】:{{ difficulty }}</el-col>
            <el-col :span="6">【标签】:{{ row.tags }}</el-col>
          </el-row>
          <el-row :class="['eleow']">
            <el-col :span="6">【学科】: {{ row.subjectName }}</el-col>
            <el-col :span="6">【目录】:{{ row.directoryName }}</el-col>
            <el-col :span="6">【方向】:{{ row.direction }}</el-col>
          </el-row>
        </div>
        <div class="stem dialogContent">
          <p>【题干】：</p>
          <p v-html="row.question"></p>
          <p>{{ questionType }} 选项:(一下选中的选项为正确选项)</p>
          <!-- 单选 -->
          <div class="singleCheck" v-if="row.questionType === '1'">
            <el-radio-group v-model="radio">
              <el-radio :key="item.id" v-for="item in option" :label="item.title">{{ item.title }}</el-radio>
            </el-radio-group>
          </div>
          <div class="someCheck" v-if="row.questionType === '2'">
            <el-checkbox-group v-model="checkSomeList">
              <el-checkbox v-for="item in option" :key="item.id" :label="item.title"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <!-- 参考答案 -->
        <div class="reference dialogContent">
          <p>
            【参考答案】:
            <el-button type="danger" size="small " @click="isShowVideo = !isShowVideo">视频答案预览</el-button>
          </p>
          <video
            controls="controls"
            autoplay
            v-if="isShowVideo && row.videoURL"
            :class="{ videos: isShowVideo }"
            :src="row.videoURL"
          ></video>
        </div>
        <!-- 答案解析 -->
        <div class="dialogContent">
          <el-row class="answer">
            <el-col :span="3">【答案解析】</el-col>
            <el-col :span="17" v-html="row.answer"></el-col>
          </el-row>
        </div>
        <!-- 解析备注 -->
        <div class="dialogContent">
          <p>【解析备注】:{{ row.remarks }}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeBtn">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>

  <!-- 预览的对话框 -->
</template>

<script>
//按需导入获取基础题库的接口函数
import { getQuestionList, deleteTest, addTestToChioce, detailsList } from '@/api/hmmm/questions'
// 获取学科名称接口函数
import { simpleSubjects, getDirectory, getSubTags, getTestlist } from '@/api/hmmm/subjects'

//按需导入常量
import { difficulty as dif, questionType as dt, direction as dr } from '@/api/hmmm/constants'
// 导入用户列表的接口函数
import { simple } from '@/api/base/users'
// 引入城市数据
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  data() {
    return {
      testForm: {
        subjectID: null,
        difficulty: null,
        catalogID: null,
        tags: null,
        keyWord: null,
        questionType: null,
        direction: null,
        creator: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        page: 1,
        pagesize: 5,
      },
      dif,
      dt,
      dr,
      // 下拉学科名称列表
      subjectlist: [],
      // 下拉二级目录列表
      secDirectoryList: [],
      // 下拉标签列表
      tagsList: [],
      // 下拉录入人列表
      creatorList: [],
      // 获取省的列表
      provinceList: [],
      // 获取市的列表
      citysList: [],
      // 基础试题的列表数据
      questionList: [],
      total: 0,
      testViewDialogVisible: false,
      row: {},
      // 预览的单选按钮的值
      radio: '',
      // 多选选中的值的集合
      checkList: [],
      // 所有选择框的集合
      option: [],
      // 预览的多选按钮的值
      checkSomeList: [],
      isShowVideo: false,
      data: '',
    }
  },
  computed: {},
  methods: {
    // 获取数据并且渲染列表
    onLoadList() {
      getQuestionList(this.testForm)
        .then((data) => {
          console.log(data)
          this.questionList = data.data.items
          this.total = data.data.counts
          this.data = parseTimeByString()
        })
        .catch((err) => {
          // this.$message.error("获取基础题库失败");
          console.log(err)
        })
    },
    // 封装获取table列表的函数
    // 分页部分的最新size
    handleSizeChange(newPageSize) {
      this.testForm.pagesize = newPageSize
      this.onLoadList()
      console.log(newPageSize)
    },
    // 分页部分最新的page
    handleCurrentChange(newPageNum) {
      this.testForm.page = newPageNum
      this.onLoadList()
      console.log(newPageNum)
    },
    // 删除按钮
    testDelete(id) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteTest(id).then((data) => {
            // this.$message.success("删除成功");
            this.$message({
              type: 'successs',
              message: '删除成功',
            })
            if (this.questionList.length === 1 && this.testForm.page > 1) {
              this.testForm.page--
            }
            this.onLoadList()
          })
        })
        .catch((error) => {
          this.$message({
            type: 'info',
            message: '取消删除试题操作!',
          })
        })
    },
    // 加入精选题库
    testCheck(id) {
      this.$confirm('此操作将试题加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          addTestToChioce(id).then(() => {
            this.onLoadList()
            this.$message({
              type: 'success',
              message: '加入精选试题成功!',
            })
            this.$router.push('choice')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消加入精选试题操作!',
          })
        })
    },
    // 试题预览
    testView(row) {
      this.getTestDetails(row.id)
      this.testViewDialogVisible = true
    },
    // 获取试题的详情
    getTestDetails(id) {
      detailsList(id)
        .then((data) => {
          this.row = data.data
          this.option = data.data.options

          data.data.options.forEach((items) => {
            if (items.isRight === 1) {
              this.radio = items.title
              this.checkSomeList.push(items.title)
            }
          })
          console.log(this.checkSomeList)
          console.log(data)
        })
        .catch((erroe) => {
          this.$message.error('获取试题详情失败')
        })
    },
    // 关闭试题预览的对话框
    closeBtn() {
      this.checkSomeList = []
      this.testViewDialogVisible = false
      this.isShowVideo = false
    },
    // 获取学科名称列表
    onloadSubjectName() {
      simpleSubjects()
        .then((data) => {
          this.subjectlist = data.data
          console.log(data)
        })
        .catch((err) => {
          this.$message.error('获取学科列表失败')
        })
    },
    // select的change事件获取学科下拉框选中的项的id
    getCurrentId(id) {
      this.testForm.catalogID = null
      this.testForm.tags = null
      this.onLoadDirectory(id)
      this.onLoadTags(id)
    },
    // 获取对应的二级目录
    onLoadDirectory(id) {
      getDirectory({ subjectID: id })
        .then((data) => {
          this.secDirectoryList = data.data.items
          console.log(data)
        })
        .catch((err) => {
          this.$message.error('获取目录列表失败')
        })
    },
    // 获取对应的标签
    onLoadTags(id) {
      getSubTags({ subjectID: id })
        .then((data) => {
          this.tagsList = data.data.items
          console.log(data)
        })
        .catch((err) => {
          this.$message.error('获取标签失败')
        })
    },

    //  获取录入人信息
    onLoadUsers() {
      simple()
        .then((data) => {
          console.log(data)
          this.creatorList = data.data
        })
        .catch((err) => {
          this.$message.error('获取录入人列表失败')
        })
    },
    // 省份的select的change事件
    getValue(value) {
      // 根据选中的省的城市获取对应的城市列表
      this.citysList = citys(value)
      console.log(this.citysList)
    },
    // 清除按钮的函数,重置表单
    clearAll() {
      this.$refs.testFormRef.resetFields()
      this.onLoadList()
    },
    // 搜索按钮
    acordingSearch() {
      console.log(this.testForm)
      this.onLoadList()
      // this.clearAll()
    },
    // 获取时间的函数
  },
  created() {
    this.onLoadList()
    this.onloadSubjectName()
    // this.onLoadTestList() //  此段报错
    this.onLoadUsers()
    // 获取省的城市列表
    this.provinceList = provinces()
  },
  computed: {
    questionType() {
      let type = ''
      if (this.row.questionType === '1') {
        type = '单选'
      } else if (this.row.questionType === '2') {
        type = '多选'
      } else {
        type = '简答'
      }

      return type
    },
    difficulty() {
      let dif = ''
      if (this.row.difficulty === '1') {
        dif = '简单'
      } else if (this.row.difficulty === '2') {
        dif = '一般'
      } else {
        dif = '困难'
      }
      return dif
    },
  },
}
</script>

<style scoped lang="less">
.container {
  padding: 10px;
  .addNewTest {
    float: right;
    padding-bottom: 10px;
  }
  .clear {
    clear: both;
  }
  .getFilter {
    .el-form-item {
      .el-form-item__label {
        padding: 0 6px 0 0 !important;
      }
    }
  }
  .el-alert {
    margin-bottom: 10px;
  }
}
.el-pagination {
  text-align: right;
  margin-top: 15px;
}
.el-dialog__footer {
  text-align: center;
}
.eleow {
  margin-bottom: 20px;
}
.dialogContent {
  border-bottom: 1px solid #cccccc;
  .answer {
    display: flex;
    align-items: center;
  }
}
.stem {
  .el-radio,
  .el-checkbox {
    display: block;
    margin-bottom: 10px;
  }
}
.videos {
  width: 500px;
  height: 300px;
}
.anthorFormItem {
  display: inline-block !important;
  .selectCity {
    width: 98px;
    /deep/.el-input {
      width: 98px;
    }
  }
}

/deep/.el-dialog__footer {
  text-align: center !important;
}
.clearBth {
  text-align: right;
  padding-right: 25px;
}
.el-input--medium {
  width: 222px;
}
.addNewTest {
  padding-right: 25px;
}
</style>
